import React, { useEffect, useRef, useState } from 'react';
import { Space, Table, Button, Modal, Flex, message, Upload, Input } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { getBanner, delete_img } from '../../api';
import path from '../../api/path.jsx';

const App = () => {
  // === 状态定义区域 ===
  // 用于控制 useEffect 的执行
  const effectRan = useRef(true);
  // 存储表格数据的状态
  const [tableData, setTableData] = useState([]);

  // 上传相关的状态
  const [loading, setLoading] = useState(false);          // 控制上传加载状态
  const [previewImage, setPreviewImage] = useState('');   // 存储预览图片的 URL
  const [selectedFile, setSelectedFile] = useState(null); // 存储选中的文件
  const [remark, setRemark] = useState('');              // 存储图片备注

  // 修改功能相关的状态
  const [editPreviewImage, setEditPreviewImage] = useState('');   // 修改时的预览图片
  const [editSelectedFile, setEditSelectedFile] = useState(null); // 修改时选中的文件
  const [editRemark, setEditRemark] = useState('');              // 修改时的备注

  // 模态框相关的状态
  const [isModalOpen, setIsModalOpen] = useState(false);         // 控制添加模态框显示
  const [open, setOpen] = useState(false);                       // 控制修改模态框显示
  const [confirmLoading, setConfirmLoading] = useState(false);   // 控制确认按钮加载状态
  // 当前选中的记录
  const [currentRecord, setCurrentRecord] = useState(null);

  // === 表格列定义 ===
  const columns = [
    {
      title: '图片',
      dataIndex: 'img',
      key: 'img',
      // 自定义渲染图片列
      render: (_, record) => (
        <Space size="middle">
          <img 
            src={record.img_url}
            alt="图片" 
            style={{ width: '100px', height: '100px' }} 
          />
        </Space>
      )
    },
    {
      title: '描述',
      dataIndex: 'descr',
      key: 'descr',
    },
    {
      title: '路径',
      dataIndex: 'phth',
      key: 'phth',
    },
    {
      title: '操作',
      key: 'operate',
      // 自定义渲染操作列
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => {
            setCurrentRecord(record);  // 设置当前选中的记录
            setOpen(true);            // 打开修改模态框
          }}>修改</a>
           <a onClick={async () => {
        try {
          const deleteData = {
            picUrl: record.img_url
          };
          // 从图片URL中提取文件名
          const picUrl =  JSON.stringify(deleteData)
          console.log(picUrl);
          
          await delete_img(picUrl);  // 只传递文件名
          message.success('删除成功');
          // 刷新表格数据
          const result = await getBanner();
          setTableData(result.results.map(item => ({
            key: item.id,
            img_url: item.img_url,
            descr: item.descr || '暂无',
            phth: item.img_url || ''
          })));
        } catch (error) {
          console.error('删除失败:', error);
          message.error('删除失败');
        }
      }}>删除</a>
        </Space>
      ),
    },
  ];

  // === 辅助函数 ===
  // 将图片转换为 Base64 格式
  const getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  };

  // 验证上传的图片
  const beforeUpload = (file) => {
    // 检查文件类型是否为 JPG/PNG
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp';
    if (!isJpgOrPng) {
      message.error('只能上传 JPG/PNG 格式的图片!');
      return false;
    }
    // 检查文件大小是否小于 2MB
    const isLt2M = file.size / 1024 / 1024 < 5;
    if (!isLt2M) {
      message.error('图片大小不能超过 5MB!');
      return false;
    }
    return true;
  };

  // === 处理函数 ===
  // 处理图片上传改变事件
  const handleChange = (info) => {
    // console.log('上传事件触发:', info);
    if (info.file) {
      // 验证文件
      // console.log('文件信息:', info.file);
      if (!beforeUpload(info.file)) {
        return;
      }
      // 设置选中的文件和预览图
      setSelectedFile(info.file);
      getBase64(info.file, (url) => {
        setPreviewImage(url);
        // console.log('预览图:', url);
        
      });
    }
  };

  // 处理修改图片上传改变事件
  const handleEditChange = (info) => {
    if (info.file) {
      if (!beforeUpload(info.file)) {
        return;
      }
      // 设置修改时选中的文件和预览图
      setEditSelectedFile(info.file);
      getBase64(info.file, (url) => {
        setEditPreviewImage(url);
      });
    }
  };

  // 处理修改确认
  const handleOk = async () => {
    setConfirmLoading(true);
    try {
      // 创建 FormData 对象
      const formData = new FormData();
      
      // 如果有新上传的文件，添加到 FormData
      if (editSelectedFile) {
        formData.append('photo', editSelectedFile);
      }
      
      // 添加原图片URL和描述
      formData.append('img_url', currentRecord.img_url);
      formData.append('descr', editRemark || currentRecord.descr);
      
      // 发送修改请求
      const response = await fetch(`${path.path}/amend`, {
        method: 'POST',
        body: formData,
      });
      
      if (response.ok) {
        message.success('修改成功');
        // 刷新表格数据
        const result = await getBanner();
        setTableData(result.results.map(item => ({
          key: item.id,
          img_url: item.img_url,
          descr: item.descr || '暂无',
          phth: item.img_url || ''
        })));
      } else {
        message.error('修改失败');
      }
    } catch (error) {
      console.error('修改错误:', error);
      message.error('修改出错');
    } finally {
      // 重置所有状态
      setConfirmLoading(false);
      setOpen(false);
      setEditPreviewImage('');
      setEditSelectedFile(null);
      setEditRemark('');
    }
  };

  const handleCancel = () => {
    setOpen(false);
    // 清空修改相关的状态
    setEditPreviewImage('');
    setEditSelectedFile(null);
    setEditRemark('');
  };

  // 添加图片相关
  const AddModal = () => {
    setIsModalOpen(true);
  };

  const AddleOk = async () => {
    if (!selectedFile) {
      message.error('请先选择图片');
      return;
    }

    try {
      const formData = new FormData();
      formData.append('photo', selectedFile);
      formData.append('descr', remark);
      for (let [a,b] of formData.entries()) {
        console.log(a,b);
      }
      const response = await fetch(`${path.path}/upload`, {
        method: 'POST',
        body: formData,
      });
      
      if (response.ok) {
        message.success('上传成功');
        setIsModalOpen(false);
        // 清空预览、文件和备注
        setPreviewImage('');
        setSelectedFile(null);
        setRemark('');
        // 刷新表格数据
        const result = await getBanner();
        setTableData(result.results.map(item => ({
          key: item.id,
          img_url: item.img_url,
          descr: item.descr || '暂无',
          phth: item.img_url || ''
        })));
      } else {
        message.error('上传失败');
      }
    } catch (error) {
      console.error('上传错误:', error);
      message.error('上传出错');
    }
  };

  const AddChang = () => {
    setIsModalOpen(false);
    // 清空预览、文件和备注
    setPreviewImage('');
    setSelectedFile(null);
    setRemark('');  // 清空备注
  };

  // 上传按钮UI
  const uploadButton = (
    <button
      style={{
        border: 0,
        background: 'none',
      }}
      type="button"
    >
      {// 根据加载状态显示不同的图标
      loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
        Upload
      </div>
    </button>
  );

  // 数据获取
  useEffect(() => {
    // 只有当 effectRan.current 为 true 时才执行
    if (effectRan.current === true) {
      const fetchData = async () => {
        try {
          const result = await getBanner();
          console.log('Banner数据:', result);
          
          // 确保数据字段名匹配
          setTableData(result.results.map(item => ({
            key: item.id,
            img_url: item.img_url,  // 使用API返回的图片URL
            descr: item.descr || '暂无',  // 添加默认值
            phth: item.img_url || ''     // 添加默认值
          })));
          
        } catch (error) {
          console.error('获取数据失败:', error);
        }
      };

      fetchData();
      // 清理函数，在组件卸载或重新执行 effect 之前运行
      return () => {
        effectRan.current = false;
      };
    }
  }, []);

  // 渲染
  return (
    <>
     <Button type="primary"style={{marginBottom:20}} onClick={AddModal}>
        添加图片
      </Button>
      <Modal
        title="修改图片信息"
        open={open}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
      >
        {currentRecord && (
          <Flex gap="middle" wrap direction="column">
            <Upload
              name="photo"
              listType="picture-card"
              className="avatar-uploader"
              showUploadList={false}
              beforeUpload={() => false}
              onChange={handleEditChange}
            >
              {editPreviewImage ? (
                <img
                  src={editPreviewImage}
                  alt="预览"
                  style={{
                    width: '100%',
                  }}
                />
              ) : (
                <img
                  src={currentRecord.img_url}
                  alt="当前图片"
                  style={{
                    width: '100%',
                  }}
                />
              )}
            </Upload>
            <Input 
              placeholder="请输入新的描述" 
              value={editRemark || currentRecord?.descr} 
              onChange={(e) => setEditRemark(e.target.value)}
            />
          </Flex>
        )}
      </Modal>
        <Modal 
          title="上传图片" 
          open={isModalOpen} 
          onOk={AddleOk} 
          onCancel={AddChang}
        >
          <Flex gap="middle" wrap direction="column">
            <Upload
              name="photo"
              listType="picture-card"
              className="avatar-uploader"
              showUploadList={false}
              beforeUpload={() => false}
              onChange={handleChange}
            >
              {previewImage ? (
                <img
                  src={previewImage}
                  alt="预览"
                  style={{
                    width: '100%',
                    height: '100%',
                    objectFit: 'cover'
                  }}
                />
              ) : (
                uploadButton
              )}
            </Upload>
            <Input 
              placeholder="请填写图片备注" 
              value={remark}
              onChange={(e) => setRemark(e.target.value)}
            />
          </Flex>
        </Modal>
      <Table columns={columns} dataSource={tableData} />
    </>
  );
};

export default App;